<!--  -->
<template>
  <div class="app">
    <div class="BoxPid">
      <div class="fl">
        <div class="item">
          <div class="box">
            <img
              :src="PIC_URL + '/tlbypcWeb/getdevices/animation1.jpg'"
              id="img1"
            />
          </div>
        </div>
        <div class="arrow">
          <img :src="PIC_URL + '/tlbypcWeb/getdevices/link.png'" alt="" />
        </div>
        <div class="item">
          <div class="box">
            <img
              :src="PIC_URL + '/tlbypcWeb/getdevices/animation2.jpg'"
              id="img2"
            />
          </div>
        </div>
        <div class="arrow">
          <img :src="PIC_URL + '/tlbypcWeb/getdevices/link.png'" alt="" />
        </div>
        <div class="item">
          <div class="box">
            <img
              :src="PIC_URL + '/tlbypcWeb/getdevices/animation3.png'"
              id="img3"
            />
          </div>
        </div>
      </div>
      <div class="fr flex">
        <Container name="选股结果">
          <div class="box">
            <div class="noMore" v-if="stockList.length == 0">
              <img
                :src="PIC_URL + '/tlbypcWeb/getdevices/wushuju.png'"
                alt=""
              />
            </div>
            <div
              class="item flex grow"
              v-for="item in stockList"
              :key="item.id"
            >
              <div class="stock_up flex grow column">
                <p>
                  <span
                    class="stockCode"
                    @click="stockDetail(item.marketCode, item.shortCode)"
                    >{{ item.shortCode }}</span
                  >
                  <span
                    class="stockName"
                    @click="stockDetail(item.marketCode, item.shortCode)"
                    >{{ item.stockName }}</span
                  >
                </p>
                <p class="stockTime">入选时间：{{ item.publishTime }}</p>
              </div>
              <div class="stock_look flex grow column">
                <span
                  class="introBtn"
                  @click="stockDetail(item.marketCode, item.shortCode)"
                  >驭龙智选
                </span>
                <!-- <span @click="stockDetail(item.marketCode,item.stockCode,0)">看波段>></span><span @click="stockDetail(item.marketCode,item.stockCode,1)">看趋势>></span><span @click="stockDetail(item.marketCode,item.stockCode,2)">看仓位>></span> -->
              </div>
            </div>
          </div>
        </Container>
      </div>
    </div>
    <div class="waves"></div>
  </div>
</template>

<script>
import { getStrategyStockPoolList } from "../api/api";
import * as fn from "../script/utils";
import dayjs from "dayjs";
import format from "date-fns/format";
import Container from "@/component/Container";

const { token, productId } = fn.getUrlParams();
export default {
  data() {
    return {
      stockList: [],
    };
  },

  components: { Container },

  computed: {},

  mounted() {
    this.getStrategyStockPoolList();
    this.loadGif();
  },

  methods: {
    loadGif() {
      const urls = [];
      for (let i = 0; i < 3; i++) {
        const url = `${this.PIC_URL}/tlbypcWeb/getdevices/animation${
          i + 1
        }.gif`;
        urls.push(url);
        const img = new Image();
        img.src = url;
        img.onload = () => {
          document.querySelector(`#img${i + 1}`).src = urls[i];
        };
        img.onerror = function () {
          this.src = urls[i];
        };
      }
    },
    async getStrategyStockPoolList() {
      await getStrategyStockPoolList({
        limit: 100,
        productId: productId || localStorage.getItem("productId"),
        clientCentralToken: token,
        productColumnId: location.href.indexOf("test") > -1 ? 82 : 58,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.stockList = data.map((item) => {
            item.publishTime = dayjs(item.publishTime || Date.now()).format(
              "YYYY-MM-DD"
            );
            item.marketCode = item.marketCode
              ? item.marketCode
              : item.stockCode.match(/[A-Z]{2}/g);
            item.shortCode = item.stockCode.match(/\d{6}/g)[0];
            return item;
          });
        }
      });
    },
    stockDetail(setcode, code) {
      setcode = setcode == "SZ" ? "0" : "1";
      window.prompt(
        "",
        `up://["open.stock",${Date.now()},{"setcode":"${setcode}","code":"${code}","type":"驭龙智选"}]`
      );
    },
  },
};
</script>
<style>
body,
html,
.app {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.waves {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 231px;
  right: 0;
  background: url($PIC_URL + "/tlbypcWeb/getdevices/bolang.png") no-repeat
    center;
  z-index: 0;
}
.app {
  background: url($PIC_URL + "/tlbypcWeb/getdevices/xgq_bg.jpg") no-repeat
    center;
  background-size: cover;
  position: relative;
  @include flex-center;
  .BoxPid {
    width: 1375px;
    min-width: 1375px;
    position: relative;
    z-index: 1;
    .fl {
      width: 369px;
      text-align: center;
      .arrow {
        height: 35px;
      }
      .item {
        background: url($PIC_URL + "/tlbypcWeb/getdevices/kuang.png") no-repeat
          center;
        padding: 10px 2px 2px;
        height: 214px;
        box-sizing: border-box;
        .box {
          background: rgba(12, 11, 26, 1);
          border: 1px solid rgba(67, 74, 93, 1);
          box-shadow: 0px 5px 8px 0px rgba(1, 9, 43, 0.4);
          height: 202px;
          img {
            width: 100%;
          }
        }
      }
    }
    .fr {
      width: 987px;
      padding-top: 8px;
      .box {
        height: 649px;
        overflow-y: auto;
        padding: 10px;
        box-sizing: border-box;
        .noMore {
          @include flex-center;
          height: 100%;
        }
        .item {
          background: url($PIC_URL + "/tlbypcWeb/getdevices/mokuai_bg.png")
            no-repeat center;
          width: 458px;
          height: 127px;
          float: left;
          box-sizing: border-box;
          margin: 10px;
          .stock_up {
            padding: 0 24px;
            line-height: 47px;
            justify-content: center;
            // border-bottom: 1px solid #495064;
            .stockCode {
              margin-right: 24px;
            }
            .stockCode,
            .stockName {
              color: #ff7f00;
              font-size: 22px;
              font-weight: 400;
            }
            .stockTime {
              color: #36a5dd;
              font-size: 18px;
              font-weight: 400;
              // float: right;
            }
            &:after {
              content: "";
              display: block;
              clear: both;
            }
          }
          .stock_look {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: 21px;
            .introBtn {
              width: 187px;
              display: inline-block;
              height: 50px;
              text-align: center;
              line-height: 50px;
              background: #0c1f4b;
              border: 1px solid transparent;
              box-shadow: inset 0px 0px 11px 0px rgba(25, 112, 255, 0.6);
              border-radius: 8px;
              font-size: 22px;
              color: #36a5dd;
              font-weight: 400;
              cursor: pointer;
              &:hover {
                background: linear-gradient(
                  180deg,
                  rgba(33, 79, 153, 1),
                  rgba(8, 17, 106, 1)
                );
                border: 1px solid rgba(12, 31, 75, 1);
                box-shadow: inset 0px 0px 11px 0px rgba(25, 112, 255, 0.9);
                color: #ffffff;
              }
            }
          }
        }
      }
    }
    &:after {
      content: "";
      display: block;
      clear: both;
    }
  }
}
.waves {
  position: absolute;
  bottom: 2px;
  left: 0;
}
</style>
